<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <link rel="stylesheet" href="../css/ratchet.css" />
    <style type="text/css">
        #myCanvas{border:dashed 2px #CCC}
		#button2{
			position:absolute;
			left:700px;
			top:10px;
			}
    </style>
    
    <body>
  <!--  <header class="bar bar-nav"><h1 class="title">基于HTML5的3D数据展示软件--Canvas绘图</h1></header>
    -->
    <div id="canvas">
        <canvas id="myCanvas" width="700px" height="400px">
        </canvas>
        <div id="title" style="position:absolute;left:210px;top:10px;">
            	<h4>数据1-某学生一学年的数学成绩</h4>
                <h5 align="center">南城启航</h5>
            </div>
         <div id="point1" style="position:absolute;left:20px;top:90px;">
         		<h6>300</h6>
         </div>
         <div id="point2" style="position:absolute;left:20px;top:180px;">
         		<h6>200</h6>
         </div>
         <div id="point3" style="position:absolute;left:20px;top:270px;">
         		<h6>100</h6>
         </div>
         <div id="yuandian" style="position:absolute;left:20px;top:360px;">
         		<h6>&nbsp;0</h6>
         </div>
    </div>
       
        <div id="button2">
        <h2>&nbsp;&nbsp;Canvas线状图</h2>
        <br>
        <br>
        	<ul><button class="btn btn-primary" onClick="startdrawline()" style="height:60px; width:150px;"><font face="微软雅黑" size="+1">显示原始数据</font></button></ul>
            
            
            <ul><button class="btn btn-negative" onClick="randomdata()"  style="height:60px; width:150px;"><font face="微软雅黑" size="+1">切换随机数据</font></button></ul>
        </div>
        
            <nav class="bar bar-tab">
 				 <a class="tab-item active" href="index-mob.html">基于HTML5的3D数据展示软件</a>
                 <a class="tab-item" href="canvasColumn.php">下一个（柱状图）</a>
			</nav>

</body>
    <script type="text/javascript">
	
	
	function randomdata(){
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d")
		ctx.clearRect(0,0,700,400);
		var linedata=new Array(11);
			for(q=0;q<12;q++){
				linedata[q]=Math.round(Math.random()*300);
			}
			//random数字为0~1之间，*60扩大60倍，+80说明从80开始
			for(var i=0;i<12;i++){
				linedata[i]=110+Math.abs((linedata[i]-300)*0.9)
			}	
			
		ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		//横坐标轴点
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		ctx.beginPath();
		ctx.moveTo(75,linedata[0]);
		ctx.strokeStyle="blue";
		//1
		
		ctx.lineTo(120,linedata[1]);
		//2
		
		ctx.lineTo(165,linedata[2]);
		//3
		
		ctx.lineTo(210,linedata[3]);
		//4
		
		ctx.lineTo(255,linedata[4]);
		//5
		
		ctx.lineTo(300,linedata[5]);
		//6
		
		ctx.lineTo(345,linedata[6]);
		//7
		
		ctx.lineTo(390,linedata[7]);
		//8
		
		ctx.lineTo(435,linedata[8]);
		//9
		
		ctx.lineTo(480,linedata[9]);
		//10
		
		ctx.lineTo(525,linedata[10]);
		//11
		
		ctx.lineTo(570,linedata[11]);
		//12
		ctx.stroke();;

	}
	function startdrawline(){
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d")
		ctx.clearRect(0,0,700,400);
                //var linedata=new Array(115,98,113,105,114,119,117,130,128,135,131,129);
                <?php
                $link=mysql_connect(SAE_MYSQL_HOST_M.':'.SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS);
                if($link)
                {
                    mysql_select_db(SAE_MYSQL_DB,$link);
                    //your code goes here	
                }
                $sql ="SELECT data FROM CColumn order by id asc";
                $result = mysql_query($sql)
                        or die(SQL语句执行失败);
                        echo 'var linedata=new Array(';
                        while($row =mysql_fetch_row($result))
                        {	
                            echo $row[0].',';
                                //echo 'var areadata=new Array('.$row[0].', '.$row[1].', '.$row[2].', '.$row[3].', '.$row[4].', '.$row[5].', '.$row[6].', '.$row[7].', '.$row[8].', '.$row[9].', '.$row[10].', '.$row[11].');';													
                        }
                        echo '0);';
                        mysql_free_result($result);
                        mysql_close();
?>
		
		for(var i=0;i<12;i++){
			linedata[i]=110+Math.abs((linedata[i]-300)*0.9)
		}	
		
			//110为纵轴最高标识点的纵坐标
			//140为最高标识点的数值
			//4.5为纵轴实际长度（270）/纵轴数值长度（60）
		ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		//横坐标轴点
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		ctx.beginPath();
		ctx.moveTo(75,linedata[0]);
		ctx.strokeStyle="blue";
		//1
		
		ctx.lineTo(120,linedata[1]);
		//2
		
		ctx.lineTo(165,linedata[2]);
		//3
		
		ctx.lineTo(210,linedata[3]);
		//4
		
		ctx.lineTo(255,linedata[4]);
		//5
		
		ctx.lineTo(300,linedata[5]);
		//6
		
		ctx.lineTo(345,linedata[6]);
		//7
		
		ctx.lineTo(390,linedata[7]);
		//8
		
		ctx.lineTo(435,linedata[8]);
		//9
		
		ctx.lineTo(480,linedata[9]);
		//10
		
		ctx.lineTo(525,linedata[10]);
		//11
		
		ctx.lineTo(570,linedata[11]);
		//12
		ctx.stroke();
		}
	
	
    </script>
</html>
